<template>
  <div class="sensor-con">
    <div class="head">
      <p class="head-title">历史森林火灾数据</p>
    </div>
    <img src="../src/assets/static/image/bg2.png" alt="" class="bg" />
    <div class="container">
        <!-- 传感器列表 -->
        <div class="sensor-list">
            <!-- 模块标题 -->
            <div class="small-title">
                <div class="small-title-left">
                    <div class="bar"></div>
                    <p>区域传感器数据</p>
                </div>
                <div class="small-title-right">
                    <img src="../src/assets/static/image/trend.png" alt="" class="icon">
                </div>
            </div>
            <div class="sensor-list-con">
                <!-- 选择区域 -->
                <div class="video-head-option">
                    <!-- 选择区域 -->
                    <div class="chose-option">
                        <div class="context" @click="changeoption">
                            <p>选择区域</p>
                            <img src="../src/assets/static/image/right.png" alt="" class="select"
                                :style="{ transform: 'rotate(' + rot + 'deg)' }">
                        </div>
                        <div class="chose-option-con" :style="{ height: optionConH + 'px' }">
                            <div class="chose-option-item" v-for="(item, index) in options" :key="item.id"
                                @click="toggleSelect(index)">
                                <img :src="item.chose == 1 ? 'https://ooo.0x0.ooo/2023/09/27/OnfQCC.png' : 'https://ooo.0x0.ooo/2023/09/27/OnfGSN.png'"
                                    alt="">
                                <p>{{ item.text }}</p>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 列表 -->
                <div class="list-form">
                    <div class="list-form-title">
                        <div class="form-title-item">所在区域</div>
                        <div class="form-title-item">传感器类型</div>
                        <div class="form-title-item">状态</div>
                        <div class="form-title-item">数值</div>
                    </div>
                    <div class="form-con">
                        <div class="form-scroll">
                            <div class="form-item">
                                <div class="form-item-value">一区</div>
                                <div class="form-item-value">温度传感器</div>
                                <div class="form-item-value abnormal">异常</div>
                                <div class="form-item-value">58℃</div>
                            </div>
                            <div class="form-item">
                                <div class="form-item-value">一区</div>
                                <div class="form-item-value">温度传感器</div>
                                <div class="form-item-value">正常</div>
                                <div class="form-item-value">58℃</div>
                            </div>
                            <div class="form-item">
                                <div class="form-item-value">一区</div>
                                <div class="form-item-value">温度传感器</div>
                                <div class="form-item-value">正常</div>
                                <div class="form-item-value">58℃</div>
                            </div>
                            <div class="form-item">
                                <div class="form-item-value">一区</div>
                                <div class="form-item-value">温度传感器</div>
                                <div class="form-item-value">正常</div>
                                <div class="form-item-value">58℃</div>
                            </div>
                            <div class="form-item">
                                <div class="form-item-value">一区</div>
                                <div class="form-item-value">温度传感器</div>
                                <div class="form-item-value">正常</div>
                                <div class="form-item-value">58℃</div>
                            </div>
                            <div class="form-item">
                                <div class="form-item-value">一区</div>
                                <div class="form-item-value">温度传感器</div>
                                <div class="form-item-value">正常</div>
                                <div class="form-item-value">58℃</div>
                            </div>
                            <div class="form-item">
                                <div class="form-item-value">一区</div>
                                <div class="form-item-value">温度传感器</div>
                                <div class="form-item-value">正常</div>
                                <div class="form-item-value">58℃</div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 图表 -->
                <div id="liner" style="width: 480px;height: 400px;"></div>
            </div>
        </div>
        <!-- 地图 -->
        <div id="map-con" class="map"></div>
        <!-- 对应区域传感器数量 -->
        <div class="number">
            <!-- 模块标题 -->
            <div class="small-title">
                <div class="small-title-left">
                    <div class="bar"></div>
                    <p>对应区域传感器数量</p>
                </div>
                <div class="small-title-right">
                    <img src="../src/assets/static/image/trend.png" alt="" class="icon">
                </div>
            </div>
            <div class="number-con">
                <div class="number-item">
                    <div class="number-item-title">湿度传感器</div>
                    <div class="number-item-value">100个</div>
                </div>
                <div class="number-item">
                    <div class="number-item-title">CO₂传感器</div>
                    <div class="number-item-value">100个</div>
                </div>
                <div class="number-item">
                    <div class="number-item-title">烟雾传感器</div>
                    <div class="number-item-value">100个</div>
                </div>
                <div class="number-item">
                    <div class="number-item-title">温度传感器</div>
                    <div class="number-item-value">100个</div>
                </div>
                <div class="number-item">
                    <div class="number-item-title">气压传感器</div>
                    <div class="number-item-value">100个</div>
                </div>
                <div class="number-item">
                    <div class="number-item-title">异常传感器</div>
                    <div class="number-item-value abnormal">100个</div>
                </div>
            </div>
        </div>
        <!-- 传感器总体情况 -->
        <div class="allsituation">
            <!-- 模块标题 -->
            <div class="small-title">
                <div class="small-title-left">
                    <div class="bar"></div>
                    <p>传感器总体情况</p>
                </div>
                <div class="small-title-right">
                    <img src="../src/assets/static/image/trend.png" alt="" class="icon">
                </div>
            </div>
            <div class="allsituation-con">
                <div class="allsituation-title">传感器总体数量</div>
                <div id="sumnumber" style="width: 400px;height: 400px;margin:0 auto;"></div>
                <div class="situation">
                    <div class="situation-title">总体状态</div>
                    <div class="situation-con">
                        <div class="situation-item">
                            <div class="situation-item-con">
                                <img src="../src/assets/static/image/Field-number.png" alt="">
                            <div class="situation-item-title">传感器总数:</div>
                            <div class="situation-item-value">600个</div>
                            </div>
                        </div>
                        <div class="situation-item">
                            <div class="situation-item-con">
                                <img src="../src/assets/static/image/normal.png" alt="">
                            <div class="situation-item-title">传感器总数:</div>
                            <div class="situation-item-value">600个</div>
                            </div>
                        </div>
                        <div class="situation-item">
                            <div class="situation-item-con">
                                <img src="../src/assets/static/image/abnormal.png" alt="">
                            <div class="situation-item-title">传感器总数:</div>
                            <div class="situation-item-value abnormal">600个</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
  </div>
</template>

<script setup>
import * as echarts from 'echarts';
import { ref, onMounted, onUnmounted } from 'vue';
onMounted(() => {
    initMap();
    initChart();
    initChart2();
});
var initMap = function () {
    // var center = new qq.maps.LatLng(39.916527, 116.397128)
    //获取地图显示控件
    var map = new qq.maps.Map(document.getElementById("map-con"), {
        //加载地图经纬度信息
        center: new qq.maps.LatLng(39.916527, 116.397128),
        zoom: 16,                       //设置缩放级别
        draggable: false,
        panControl: false,           //设置是否可以拖拽
        scrollwheel: false,
        zoomControl: false,        //设置是否可以滚动
        disableDoubleClickZoom: true    //设置是否可以双击放大
    });
    // 消防车
    var anchor = new qq.maps.Point(39.916527, 116.397128),
        size = new qq.maps.Size(40, 40),
        origin = new qq.maps.Point(0, 0),
        icon = new qq.maps.MarkerImage('src/assets/static/image/plane.png', size, origin, anchor);
    // 创建标记
    var marker = new qq.maps.Marker({
        icon: icon,
        map: map,
        position: map.getCenter()
    });
    // 灭火器
    var anchor2 = new qq.maps.Point(10.916527, 115.397128),
        size = new qq.maps.Size(40, 40),
        origin = new qq.maps.Point(0, 0),
        icon2 = new qq.maps.MarkerImage('src/assets/static/image/flat.png', size, origin, anchor2);
    // 创建标记
    var marker2 = new qq.maps.Marker({
        icon: icon2,
        map: map,
        position: map.getCenter()
    });

    // 巡护人员
    var anchor3 = new qq.maps.Point(99.916527, 114.397128),
        size = new qq.maps.Size(40, 40),
        origin = new qq.maps.Point(0, 0),
        icon3 = new qq.maps.MarkerImage('src/assets/static/image/plane.png', size, origin, anchor3);
    // 创建标记
    var marker3 = new qq.maps.Marker({
        icon: icon3,
        map: map,
        position: map.getCenter()
    });

    // 瞭望塔
    var anchor4 = new qq.maps.Point(199.916527, 117.397128),
        size = new qq.maps.Size(40, 40),
        origin = new qq.maps.Point(0, 0),
        icon4 = new qq.maps.MarkerImage('src/assets/static/image/plane.png', size, origin, anchor4);
    // 创建标记
    var marker4 = new qq.maps.Marker({
        icon: icon4,
        map: map,
        position: map.getCenter()
    });

    // 无人机
    var anchor5 = new qq.maps.Point(154.916527, 120.397128),
        size = new qq.maps.Size(40, 40),
        origin = new qq.maps.Point(0, 0),
        icon5 = new qq.maps.MarkerImage('src/assets/static/image/plane.png', size, origin, anchor5);
    // 创建标记
    var marker5 = new qq.maps.Marker({
        icon: icon5,
        map: map,
        position: map.getCenter()
    });

    // 传感器
    var anchor6 = new qq.maps.Point(288.916527, 121.397128),
        size = new qq.maps.Size(40, 40),
        origin = new qq.maps.Point(0, 0),
        icon6 = new qq.maps.MarkerImage('src/assets/static/image/plane.png', size, origin, anchor6);
    // 创建标记
    var marker6 = new qq.maps.Marker({
        icon: icon6,
        map: map,
        position: map.getCenter()
    });
    // 添加提示
    var info = new qq.maps.InfoWindow({
        map: map
    })
    // 获取标记点击事件
    qq.maps.event.addListener(marker2, 'click', function () {
        info.open();
        info.setContent('<div style="text-align:center;white-space:nowrap;' +
            'margin:10px;">1号无人机</div>');
        info.setPosition(new qq.maps.LatLng(39.916527, 116.397128));
        alert(11)
    });
}

var optionConH = ref(0);
var rot = ref(0);
var ischose = ref(false);
// 切换显示下拉选择区域
function changeoption() {
    if (!ischose.value) {
        rot.value = 90;
        optionConH.value = 500;
    } else {
        optionConH.value = 0;
        rot.value = 0;
    }
    ischose.value = !ischose.value;
}

var options = ref([
    {
        id: 1,
        text: '一区',
        chose: 1
    },
    {
        id: 2,
        text: '二区',
        chose: 0
    },
    {
        id: 3,
        text: '三区',
        chose: 0
    },
    {
        id: 4,
        text: '四区',
        chose: 0
    },
    {
        id: 5,
        text: '五区',
        chose: 0
    },
    {
        id: 6,
        text: '六区',
        chose: 0
    },
    {
        id: 7,
        text: '七区',
        chose: 0
    }
]);

function toggleSelect(index) {
    for (var i = 0; i < options.value.length; i++) {
        options.value[i].chose = 0
    }
    options.value[index].chose = 1
}

function initChart() {
    var myEcharts = echarts.init(document.getElementById('liner'), "purple-passion");
    // 指定图表的配置项和数据
    const offsetX = 10;  //bar宽
    const offsetY = 5;   //倾斜角度
    // 绘制左侧面
    const CubeLeft = echarts.graphic.extendShape({
        shape: {
            x: 0,
            y: 0,
        },
        buildPath: function (ctx, shape) {
            const xAxisPoint = shape.xAxisPoint;
            const c0 = [shape.x, shape.y]; // 左侧面 右上点
            const c1 = [shape.x - offsetX, shape.y - offsetY + 5]; // 左侧面  左上点
            const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY + 5]; // 左侧面 左下点
            const c3 = [xAxisPoint[0], xAxisPoint[1] + 5]; // 左侧面 右下点
            ctx.moveTo(c0[0], c0[1]).lineTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).closePath();
        },
    });
    // 绘制右侧面
    const CubeRight = echarts.graphic.extendShape({
        shape: {
            x: 0,
            y: 0,
        },
        buildPath: function (ctx, shape) {
            const xAxisPoint = shape.xAxisPoint;
            const c1 = [shape.x, shape.y]; //右侧面左上点
            const c2 = [xAxisPoint[0], xAxisPoint[1] + 5]; //右侧面 左下点
            const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY + 5]; //右侧面  右下点
            const c4 = [shape.x + offsetX, shape.y - offsetY + 5]; //右侧面 右上点
            ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath();
        },
    });
    // 绘制顶面
    const CubeTop = echarts.graphic.extendShape({
        shape: {
            x: 0,
            y: 0,
        },
        buildPath: function (ctx, shape) {
            const c1 = [shape.x, shape.y + 5];//顶部菱形下点
            const c2 = [shape.x + offsetX, shape.y - offsetY + 5]; //顶部菱形右点
            const c3 = [shape.x, shape.y - offsetX + 5]; //顶部菱形上点
            const c4 = [shape.x - offsetX, shape.y - offsetY + 5]; //顶部菱形左点
            ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath();
        },
    });
    // 注册三个面图形
    echarts.graphic.registerShape('CubeLeft', CubeLeft);
    echarts.graphic.registerShape('CubeRight', CubeRight);
    echarts.graphic.registerShape('CubeTop', CubeTop);
    let xAxisData = ["湿度传感器", "CO₂传感器", "烟雾传感器", "温度传感器", "气压传感器"]
    let seriesData = [100, 200, 300, 400, 200]
    // 绿色渐变
    // let colorArr = [["#12D5AF"], ["#0BC19D", "rgba(13,8,16,0)"], ["#68EFD4", "rgba(14,185,151,0)"]]
    // 蓝色渐变
    let colorArr = [["#71ddff"], ["rgba(12, 149, 198, 1)", "rgba(13,8,16,0)"], ["rgba(34, 188, 255, 1)", "rgba(14,156,185,0)"]]
    var option = {
        backgroundColor: 'transparent',
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow',
            },
            formatter: function (params, ticket, callback) {
                const item = params[1];
                return item.name + ' : ' + item.value;
            },
        },
        grid: {
            left: '5%',
            right: '10%',
            top: '15%',
            bottom: '5%',
            containLabel: true,
        },
        xAxis: {
            type: 'category',
            data: xAxisData,
            axisLine: {
                show: true,
                lineStyle: {
                    width: 1,
                    color: 'rgba(255, 255, 255, 0.60)',
                },
            },
            axisTick: {
                show: false,
            },
            axisLabel: {
                fontSize: 14,
                interval: 0,
                // 使用函数模板，函数参数分别为刻度数值（类目），刻度的索引
                formatter: function (value) {
                    const length = value.length
                    if (length > 3) {
                        const start = Math.floor(length / 2)
                        const str = value.slice(0, start) + '\n' + value.slice(start, length)
                        return str;
                    }
                    return value
                }
            },
        },
        yAxis: {
            type: 'value',
            minInterval: 1,
            // y轴（竖直线）
            axisLine: {
                show: false
            },
            // y轴横向 标线
            splitLine: {
                show: true,
                lineStyle: {
                    color: 'rgba(255,255,255,0.16)',
                },
            },
            // y轴刻度线
            axisTick: {
                show: false,
            },
            // y轴文字
            axisLabel: {
                fontSize: 14,
                color: 'rgba(255, 255, 255, 0.60)'
            },
        },
        series: [
            {
                type: 'custom',
                renderItem: (params, api) => {
                    const location = api.coord([api.value(0), api.value(1)]);
                    return {
                        type: 'group',
                        children: [
                            // 左侧面
                            {
                                type: 'CubeLeft',
                                shape: {
                                    api,
                                    xValue: api.value(0),
                                    yValue: api.value(1),
                                    x: location[0],
                                    y: location[1],
                                    xAxisPoint: api.coord([api.value(0), 0]),
                                },
                                style: {
                                    fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                        {
                                            offset: 0,
                                            color: colorArr[1][0],
                                        },
                                        {
                                            offset: 1,
                                            color: colorArr[1][1],
                                        },
                                    ]),
                                },
                            },
                            // 右侧面
                            {
                                type: 'CubeRight',
                                shape: {
                                    api,
                                    xValue: api.value(0),
                                    yValue: api.value(1),
                                    x: location[0],
                                    y: location[1],
                                    xAxisPoint: api.coord([api.value(0), 0]),
                                },
                                style: {
                                    fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                        {
                                            offset: 0,
                                            color: colorArr[2][0],
                                        },
                                        {
                                            offset: 1,
                                            color: colorArr[2][1],
                                        },
                                    ]),
                                },
                            },
                            // 顶部
                            {
                                type: 'CubeTop',
                                shape: {
                                    api,
                                    xValue: api.value(0),
                                    yValue: api.value(1),
                                    x: location[0],
                                    y: location[1],
                                    xAxisPoint: api.coord([api.value(0), 0]),
                                },
                                style: {
                                    fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                        {
                                            offset: 0,
                                            color: colorArr[0][0],
                                        },
                                        {
                                            offset: 1,
                                            color: colorArr[0][0],
                                        },
                                    ]),
                                },
                            },
                        ],
                    };
                },
                data: seriesData,
            },
            {
                type: 'bar',
                label: {
                    normal: {
                        show: true,
                        position: 'top',
                        formatter: (e) => {
                            return e.value;
                        },
                        fontSize: 16,
                        color: '#43C4F1',
                        offset: [0, -5],
                    },
                },
                itemStyle: {
                    color: 'transparent',
                },
                tooltip: {},
                data: seriesData,
            },
        ],
    };


    // 使用刚指定的配置项和数据显示图表。
    myEcharts.setOption(option);
}

function initChart2() {
    var myEcharts = echarts.init(document.getElementById('sumnumber'), "purple-passion");
    var cate = [
        "湿度传感器",
        "CO₂传感器",
        "烟雾传感器",
        "温度传感器",
        "气压传感器",
    ];
    //数据值，顺序和Y轴的名字一一对应
    var barData = [92, 90, 75, 65, 55];
    var option = {
        backgroundColor: "transparent",
        tooltip: {
            trigger: "axis",
            axisPointer: {
                type: "shadow",
            },
        },
        //图表位置
        grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            top: "0%",
            containLabel: true,
        },
        //X轴
        xAxis: {
            type: "value",
            axisLine: {
                show: false,
            },
            axisTick: {
                show: false,
            },
            //不显示X轴刻度线和数字
            splitLine: { show: false },
            axisLabel: { show: false },
        },
        yAxis: {
            type: "category",
            data: cate,
            //升序
            inverse: true,
            splitLine: { show: false },
            axisLine: {
                show: false,
            },
            axisTick: {
                show: false,
            },
            //key和图间距
            offset: 10,
            //动画部分
            animationDuration: 300,
            animationDurationUpdate: 300,
            //key文字大小
            nameTextStyle: {
                fontSize: 5,
            },
            axisLabel: {
                textStyle: {
                    color: '#F5F5F5',  //更改坐标轴文字颜色
                    fontSize: 15    //更改坐标轴文字大小
                }
            },
        },
        series: [
            {
                //柱状图自动排序，排序自动让Y轴名字跟着数据动
                realtimeSort: true,
                name: "数量",
                type: "bar",
                data: barData,
                barWidth: 6,
                barGap: 10,
                smooth: true,
                valueAnimation: true,
                //Y轴数字显示部分
                label: {
                    normal: {
                        show: true,
                        position: "right",
                        valueAnimation: true,
                        offset: [5, -2],
                        textStyle: {
                            color: "#F5F5F5",
                            fontSize: 15,
                        },
                        formatter: '{c} '
                    },
                },
                itemStyle: {
                    emphasis: {
                        barBorderRadius: 7,
                    },
                    //颜色样式部分
                    normal: {
                        barBorderRadius: 8,
                        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                            { offset: 0, color: "rgba(0, 179, 245,.4)" },
                            { offset: 1, color: "rgba(0, 179, 245, 1)" },
                        ]),
                    },
                },
            },
        ],
        //动画部分

        animationDuration: 0,
        animationDurationUpdate: 3000,
        animationEasing: "linear",
        animationEasingUpdate: "linear",
    };


    // 指定图表的配置项和数据
    myEcharts.setOption(option);
}
</script>

<style scoped>
html,
body {
  position: relative;
  height: 100%;
}

.satellite-con {
  margin: 0 auto;
  height: 100%;
  width: 100%;
  background: url(../src/assets/static/image/bg2.png) no-repeat;
  background-size: cover;
  background-position: center;
  background-color: #1e2e49;
}

.bg {
  width: 100%;
  position: absolute;
  height: 100%;
  left: 0;
  top: 0;
  object-fit: cover;
  z-index: -1;
}

.head {
  position: fixed;
  top: 0;
  left: 0;
  background: url(../src/assets/static/image/head3.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  width: 100%;
  height: 80.5px;
}

.head-title {
  text-align: center;
  font-size: 27.6px;
  line-height: 17.25px;
  color: rgb(95, 218, 255);
}

.plane {
  width: 575px;
  height: 460px;
}

.container {
  height: calc(100%-75px);
  margin-top: 75px;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.small-title {
  height: 34.5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
  font-size: 21.85px;
  background-color: rgba(36, 74, 126, 0.3);
}

.small-title-left {
  display: flex;
  align-items: center;
}

.bar {
  width: 11.5px;
  height: 34.5px;
  margin-right: 20px;
  box-shadow: 0 0 20px 10px #064574;
  background: linear-gradient(to bottom, #036eb1, #00f4f0);
}

.icon {
  width: 23px;
  height: 23px;
  margin-right: 23px;
}
/* 传感器列表 */
.sensor-list {
    position: absolute;
    width: 575px;
    height: 230px;
    box-sizing: border-box;
    left: 5.75px;
    top: 103.5px;
}
.sensor-list-con {
    padding: 11.5px;
    height: 910.75px;
    border-radius: 0 0 11.5px 11.5px;
    border: 1.15px solid #036eb1;
}

.video-head-option {
    display: flex;
    width: 100%;
    height: 69px;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
}

.chose-option {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 172.5px;
    height: 57.5px;
    color: #fff;
    background: url(../src/assets/static/image/btn2.png) no-repeat;
    background-size: contain;
}

.chose-option .bg-img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.chose-option .select {
    width: 23px;
    height: 23px;
    transition: all 0.5s;
}

.chose-option .context {
    display: flex;
    align-items: center;
}

.chose-option-con {
    position: absolute;
    top: 69px;
    left: 5.75px;
    text-align: center;
    width: 172.5px;
    overflow: hidden;
    transition: all 0.5s;
    z-index: 99;
}

.chose-option-item {
    width: 172.5px;
    color: #fff;
    height: 46px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 11.5px 0;
}

.chose-option-item img {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.chose-option-item p {
    position: absolute;
}
.list-form-title {
    display: flex;
    align-items: center;
}

.form-title-item {
    width: 172.5px;
    height: 46px;
    text-align: center;
    line-height: 46px;
    color: #fff;
    font-weight: 600;
    font-size: 20.7px;
}

.form-con {
    width: 552px;
    overflow: hidden;
    margin-top: 11.5px;
}

.form-scroll {
    width: 571.55px;
    height: 356.5px;
    overflow: auto;
    color: #fff;
    font-size: 20.7px;
    overflow-y: scroll;
}

.form-item {
    display: flex;
    align-items: center;
    background-color: rgba(36, 74, 126, 0.3);
    margin-top: 11.5px;
}

.form-item-value {
    color: #00b3f5;
    text-align: center;
    line-height: 46px;
    width: 172.5px;
    height: 46px;
    line-height: 46px;
    font-size: 21.85px;
}

.abnormal {
    color: #fd5555 !important;
    font-weight: 600;
}
/* 图表 */
#liner {
    margin: 0 auto;
}
/* 地图 */
#map-con {
    /*地图(容器)显示大小*/
    width: 851px;
    height: 785px;
    /* margin: 100px auto; */
    position: absolute;
    top: 103.5px;
    left: 592.25px;
}
/* 对应区域传感器数量 */
.number {
    position: absolute;
    width: 851px;
    box-sizing: border-box;
    left: 592.25px;
    top: 900px;
}

.number-con {
    padding: 11.5px;
    height: 115px;
    border-radius: 0 0 11.5px 11.5px;
    border: 1.15px solid #036eb1;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.number-item {
    width: 103.5px;
    height: 103.5px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 11.5px;
    flex-direction: column;
    border-bottom: 2.3px solid #036eb1;
    border-top: 2.3px solid #036eb1;
    background-color: rgba(36, 74, 126, 0.3);
}

.number-item-title {
    color: #fff;
    font-weight: 600;
    font-size: 17.25px;
}

.number-item-value {
    color: #00b3f5;
    font-size: 23px;
    font-weight: 600;
    margin-top: 11.5px;
}
/* 传感器总体情况 */
.allsituation {
    position: absolute;
    width: 464.5px;
    box-sizing: border-box;
    right: 5.75px;
    top: 103.5px;
}

.allsituation-con {
    padding: 11.5px;
    height: 910.75px;
    border-radius: 0 0 11.5px 11.5px;
    border: 1.15px solid #036eb1;
}
#liner {
    margin: 0 auto;
}

.allsituation-title,
.situation-title {
    margin-top: 23px;
    padding-bottom: 5.75px;
    color: #fff;
    width: 147.2px;
    font-size: 20.7px;
    font-weight: 600;
    border-bottom: 2.3px solid #00b3f5;
}
.situation-title {
    width: 86.25px;
}
.situation {
    margin-top: 11.5px;
}
.situation-con {
    margin-top: 46px;
}
.situation-item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 80.5px;
    margin-bottom: 23px;
    background-color: rgba(36, 74, 126, 0.3);
}
.situation-item-con {
    width: 345px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.situation-item img {
    width: 46px;
    height: 46px;
}
.situation-item-title {
    color: #fff;
    font-size: 18.4px;
    font-weight: 600;
    margin-right: 23px;
}
.situation-item-value {
    color: #00b3f5;
    font-weight: 600;
    font-size: 23px;
}
</style>